 
<template>
  <div>
    <van-tabbar v-model="active">

        <van-tabbar-item  @click="itemClick(item.path)"
              v-for="(item,i) in navList" :key="i"  :icon="item.icon">{{ item.navItem }}</van-tabbar-item>
   
        <!-- <van-tabbar-item icon="home" @click="itemClick">首页</van-tabbar-item>
    
        <van-tabbar-item icon="search" >菜单</van-tabbar-item>
  
        <van-tabbar-item icon="friends-o">结算</van-tabbar-item>
     
        <van-tabbar-item icon="setting-o">个人</van-tabbar-item> -->
    
    </van-tabbar>
  </div>
</template>

<script>
export default {
  //导出组件  组件也是一个vue对象，可以在里面写data
  name: "tabbar",
    data() {
    return {
      active: 0,
      navList: [
        { path: '/index', navItem: '首页',icon:"home-o"},
        { path: '/shop', navItem: '菜单' ,icon:"search"},
        { path: '/cart', navItem: '结算',icon:"friends-o" },
        { path: '/set', navItem: '个人' ,icon:"setting-o"}
     
      ]
    }
  },
   methods: {
            itemClick(path) {
                console.log(path)
                this.$router.replace(path)
            }
            
        },
};
</script>

<style >
</style>

